import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts';
import {Button} from 'antd'
export default function Echarts() {
  const mainRef = useRef()
  const myChart = useRef()
  useEffect(() => {
    // 基于准备好的dom，初始化echarts实例
    myChart.current = echarts.init(mainRef.current);
    // 绘制图表
    changeData({
      type: 'pie'
    })
  }, [])
  // 改变图标展示形式及数据
  const changeType = (data) => { 
    changeData({
      type: data.type,
      data: data.data
    })
  }
  function changeData(config) {

    myChart.current.setOption({
      title: {
        text: 'ECharts 入门示例',
        link: 'https://bilibili.com',
        textStyle: {
          color: '#f66'
        },
        show: true,
        backgroundColor: '#ccc',
        subtext: '啊哈哈哈',
        shadowColor: 'rgba(255, 0, 0, 0.8)',
        shadowBlur: 10,
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', {
          value: 'T恤',
          textStyle: {
            color: '#f66'
          }
        }, '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: config.type,
          data: config.data ? config.data : [5, 20, 50, 36, 10, 10, 20]
        }
      ]
    });
  }
  return (

   <div>
    <Button onClick={() => changeType({ type: 'bar' ,data:[10, 49, 54, 24, 63, 92]})}>修改为柱状图</Button>
     <div ref={mainRef} style={{ width: 600, height: 400 }}>Echarts</div>
   </div>
  )
}
